<template>
	<view class="content with-tabbar">

		<scroll-view style="white-space: normal;" :style="{ 'height': scrollHeight + 'px' }" :scroll-y="true">
			<div class="pt-18 pb-18 pl-30 pr-30 bg-fff  bor-r8">
				<picker mode="selector" @change="change" :range="typeList" range-key="label">
					<view class=" resume-box lh-70 flex align-center pb-15 bor-b">
						<view class="form-label resume-title fontS28 color-3"> 选择类型 </view>
						<view class=" form-cnt">
							<div class="radio">{{ postForm.typeName || '请选择类型' }}</div>
						</view>
						<div class="ml-auto iconfont icon-youjiantou"></div>
					</view>
				</picker>
				<div class="lh-70 flex align-center pb-15 bor-b resume-box pt-15">
					<div class="resume-title fontS28 color-3">抬头名称</div>
					<div class="fontS28 color-0d0 resume-input">
						<input type="text" placeholder="填写发票抬头" v-model="postForm.headerName" />
					</div>
				</div>


				<div class="lh-70 flex align-center pb-15 bor-b resume-box pt-15">
					<div class="resume-title fontS28 color-3">企业税号</div>
					<div class="fontS28 color-0d0 resume-input">
						<input type="text" placeholder="请输入税号" v-model="postForm.taxNumber" />
					</div>
				</div>
				<div class="lh-70 flex align-center pb-15 bor-b resume-box pt-15">
					<div class="resume-title fontS28 color-3">注册地址</div>
					<div class="fontS28 color-0d0 resume-input">
						<input type="text" placeholder="选填" v-model="postForm.registeredAddress" />
					</div>
				</div>
				<div class="lh-70 flex align-center pb-15 bor-b resume-box pt-15">
					<div class="resume-title fontS28 color-3">注册电话</div>
					<div class="fontS28 color-0d0 resume-input">
						<input type="text" placeholder="选填" v-model="postForm.registeredPhone" />
					</div>
				</div>
				<div class="lh-70 flex align-center pb-15 bor-b resume-box pt-15">
					<div class="resume-title fontS28 color-3">开户银行</div>
					<div class="fontS28 color-0d0 resume-input">
						<input type="text" placeholder="选填" v-model="postForm.depositBank" />
					</div>
				</div>
				<div class="lh-70 flex align-center resume-box pt-15">
					<div class="resume-title fontS28 color-3">银行账号</div>
					<div class="fontS28 color-0d0 resume-input">
						<input type="text" placeholder="选填" v-model="postForm.bankAccount" />
					</div>
				</div>

			</div>
			<div class="pt-18 pb-18 pl-30 pr-30 bg-fff mt-20 bor-r8">

				<div class="lh-70 flex align-center resume-box">
					<div class="resume-title fontS28 color-3">邮箱地址</div>
					<div class="fontS28 color-0d0 resume-input">
						<input type="text" placeholder="填写邮箱地址" v-model="postForm.email" />
					</div>
				</div>
			</div>
			<div class="bg-fff p-20 bor-r8 mt-20 color-3">
				<div class="fontS28 color-3 lh-60">
					开票注意事项
				</div>
				<div class="fontS24 color-3 lh-40">
					1、仔细核对开票抬头名称、税号、发票收件邮箱
				</div>
				<div class="fontS24 color-3 lh-40">
					2、您可以下载/打印使用电子发票，具有同等法律效力
				</div>
				<div class="fontS24 color-3 lh-40">
					2、申请开票15个工作日发出，注意邮箱查收
				</div>




			</div>
		</scroll-view>
		<div class="bottom flex">
			<div class="bottomBtnConfirm fontS26 ml-auto" @click="submit">提交</div>

		</div>



	</view>
</template>

<script>
import { invoiceApply } from '@/api/order'
const api = require("@/api/api.js").api;
export default {
	computed: {
		userInfo() {
			console.log(this.$store.getters.userInfo)
			return this.$store.getters.userInfo || {};
		},
	},
	data() {
		return {
			scrollHeight: 300,
			postForm: {
				"typeName": '',
				"bankAccount": "",//银行账号	
				"depositBank": "",//开户银行	
				"email": "",//邮箱	
				"headerName": "",//抬头名称	
				"registeredAddress": "",//注册地址	
				"registeredPhone": "",//注册电话	
				"taxNumber": "",//税号	
				"type": "",//类型
				"orderId": '',
				"orderNo": ''

			},
			typeList: [
				{ label: '电子普票', value: 1 },
				{ label: '电子专票', value: 2 }
			],
			orderId: ''
		}
	},
	async onLoad(options) {
		if (options.id) {
			this.postForm.orderId = options.id
			this.postForm.orderNo = options.orderNo
			this.postForm.id = options.id
		}
		let _this = this;
		const query = uni.createSelectorQuery();
		query.select('.bottom').boundingClientRect(function (rect) {
			_this.scrollHeight = Number(uni.getSystemInfoSync().screenHeight - rect.height - 100)
		}).exec();

	},
	methods: {
		async getonLineResume() {
			const { data } = await onLineResume()
			this.postForm = data
			this.value = data.provinceName + data.cityName + data.areaName

		},

		change(e) {

			this.postForm.type = this.typeList[e.detail.value].value
			this.postForm.typeName = this.typeList[e.detail.value].label
		},
		async submit() {
			if (!this.postForm.type) {
				uni.showToast({ title: '请先选择开票类型', icon: 'none' })
				return false;
			}
			if (!this.postForm.taxNumber) {
				uni.showToast({ title: '请先输入税号', icon: 'none' })
				return false;
			}
			if (!this.postForm.headerName) {
				uni.showToast({ title: '请先填写发票抬头', icon: 'none' })
				return false;
			}
			if (!this.postForm.email) {
				uni.showToast({ title: '请先填写邮箱地址', icon: 'none' })
				return false;
			}
			const { data } = await invoiceApply(this.postForm)
			uni.navigateBack({
				delta: 1
			})

		},


	}
}
</script>

<style lang="less" scoped>
@import url(order.less);

.content {
	display: flex;
	flex-direction: column;

	padding: 20upx;
	// text-align: center;
	height: 100vh;
	overflow: hidden;

}

.title {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 20px;
}



.bottom {
	padding-bottom: calc(constant(safe-area-inset-bottom) + 22upx);
	/*兼容 IOS<11.2*/
	padding-bottom: calc(env(safe-area-inset-bottom) + 22upx);
	/*兼容 IOS>11.2*/
}

.color-0d0 {
	color: #0D0D12;
}
</style>